<!doctype html>
<html lang="cn">

<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			list-style: none;
			border: 0;
		}

		.all {
			width: 500px;
			height: 200px;
			padding: 7px;
			border: 1px solid #ccc;
			margin: 100px auto;
			position: relative;
		}

		.screen {
			width: 500px;
			height: 200px;
			overflow: hidden;
			position: relative;
		}

		.screen li {
			width: 500px;
			height: 200px;
			overflow: hidden;
			float: left;
		}

		.screen ul {
			position: absolute;
			left: 0;
			top: 0px;
			width: 3000px;
		}

		.all ol {
			position: absolute;
			right: 10px;
			bottom: 10px;
			line-height: 20px;
			text-align: center;
		}

		.all ol li {
			float: left;
			width: 20px;
			height: 20px;
			background: #fff;
			border: 1px solid #ccc;
			margin-left: 10px;
			cursor: pointer;
		}

		.all ol li.current {
			background: yellow;
		}

		/*#arr {display: none;}*/
		#arr span {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 5px;
			top: 50%;
			margin-top: -20px;
			background: #000;
			cursor: pointer;
			line-height: 40px;
			text-align: center;
			font-weight: bold;
			font-family: '黑体';
			font-size: 30px;
			color: #fff;
			opacity: 0.3;
			border: 1px solid #fff;
		}

		#arr #right {
			right: 5px;
			left: auto;
		}

		#word {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 260px;
			height: 40px;
			background: #CCC;
			line-height: 40px;
			color: #333;
		}
	</style>


</head>

<body>
	<div class="all" id='all'>
		<div class="screen" id="screen">
			<ul id="ul">
				<li><img src="images/1.jpg" width="500" height="200" /></li>
				<li><img src="images/2.jpg" width="500" height="200" /></li>
				<li><img src="images/3.jpg" width="500" height="200" /></li>
				<li><img src="images/4.jpg" width="500" height="200" /></li>
				<li><img src="images/5.jpg" width="500" height="200" /></li>
				<li><img src="images/1.jpg" width="500" height="200" /></li>
			</ul>
			<ol>
				<li class="current">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ol>
			<div id="arr"><span id="left"></span><span id="right">></span></div>
		</div>
	</div>
	<script src="./animate.js"></script>
	<script>
		var all = document.querySelector(".all");
		var screen = document.querySelector(".screen");
		var uls = document.querySelector("ul");
		// console.log(ul);
		var lis = document.querySelectorAll("#ul li");
		// console.log(lis);
		var ol = document.querySelector("ol");
		// console.log(ol);
		var points = document.querySelectorAll("ol li");
		// console.log(points);
		// var arr = document.querySelector("#left");
		var btnleft = document.querySelector("#left");
		var btnRight = document.querySelector("#right");

		var index = 0;
		var square = 0;
		var width = screen.offsetWidth;
		// console.log(width);
		// console.log(screen);
		var dingshiqi = null;

		var setPoint = function (key) {
			for (var i = 0; i < points.length; i++) {
				points[i].className = "";
			}
			points[key].className = "current";
		}

		// setPoint(4);
		var autoPlay = function () {
			console.log("test");
			index ++;
			if (index > 5) {
				index = 1;
				uls.style["marginLeft"] = "0px";

			}
			animate(uls, "marginLeft", -(index * width));
			square++;
			square = square > 4 ? 0 : square;
			setPoint(square);
			console.log(index);
		}
		// autoPlay();

		dingshiqi = setInterval(function () { autoPlay(); }, 2000)
	</script>
</body>

</html>